<template>
	<up-popup :show="show" mode="center" bgColor="transparent" @close="emits('close')" >
		<view class="answer-count-alert" >
			<image :src="`${$imgurl}/static/fk-count-bg.png`" mode=""></image>
			<view class="text-box">
				<view class="text">
					<view class="h1">
						破解机会已用完
					</view>
					<view class="msg">
						您可观看广告或分享谜礼，获取破解机会
					</view>
				</view>
				<view class="btns">
					<view class="it">
						<view class="left">
							<image :src="`${$imgurl}/static/icon-video.png`" mode=""></image>
							<view class="m">
								浏览视频广告
							</view>
						</view>
						<view class="btn" @click="onAdShow">
							浏览
						</view>
					</view>
					<view class="it">
						<view class="left">
							<image :src="`${$imgurl}/static/icon-aixin.png`" mode=""></image>
							<view class="m">
								分享谜礼破解
							</view>
						</view>
						<button open-type="share" data-type="add" :data-id="id" class="btn">
							分享
						</button>
					</view>
				</view>
				
			</view>
			<image :src="`${$imgurl}/static/icon-close.png`" @click="emits('close')"  class="close" mode=""></image>
		</view>
	</up-popup>
</template>

<script setup>
	import {rewardApi,setShareNumApi} from "@/api/public.js"
	import {ref} from "vue"
	const emits = defineEmits();
	let props = defineProps({
			id:{
				type:Number,
				default:''
			},
			type:{
				type:String,
				default:'gift'
			},
			show:{
				type:Boolean,
				default:false
			}
		});
	const onAdShow=async ()=>{
		if(props.id){
			await rewardApi({id:props.id,type:'gift'})
			emits('close')
			uni.$u.toast('奖励成功！')
		}
	}
</script>

<style lang="scss">
	.answer-count-alert{
		position: relative;
		image{
			width:600rpx;
			height:630rpx;
			display: flex;
		}
		.text-box{
			position: absolute;
			width:100%;
			top:206rpx;
			text-align: center;
			.text{
				line-height: 1;
				.h1{
					font-weight: bold;
					font-size: 44rpx;
					color:#F5493D;
				}
				.msg{
					font-size:28rpx;
					line-height: 48rpx;
					margin-top:20rpx;
				}
			}
		}
		.btns{
			padding:40rpx;
			.it{
				display: flex;
				height:108rpx;align-items: center;
				justify-content: space-between;
				background-color: #FFF1E5;
				padding:0 28rpx;
				border-radius: 16rpx;
				&:nth-child(1){
					margin-bottom: 20rpx;
					background-color: #E5F7FF;
					.left{
						.m{
							color:#246C8C
						}
					}
					.btn{
						background: linear-gradient( 125deg, #66D1FF 0%, #4CAFFF 100%);
					}
				}
				.left{
					display: flex;align-items: center;
					image{
						display: block;
						width:64rpx;height:64rpx;
					}
					.m{
						font-size: 28rpx;
						font-weight: bold;
						margin-left:32rpx;
						color:#CE5834;
					}
				}
				.btn{
					line-height: 52rpx;
					background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
					border-radius:8rpx;
					padding:0 20rpx;
					font-size: 28rpx;
					text-align: center;font-weight: bold;
					color:#fff;
				}
			}
		}
		.close{
			margin:0 auto;
			margin-top:48rpx;
			height:84rpx;width:84rpx;
		}
	}
</style>